<template>
  <div>
    <div style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;margin-top: 10px;">
      <el-input v-model="rolequery.rname" placeholder="角色名" style="width: 200px;float: left;"></el-input>
      <el-input v-model="rolequery.starttime" type="date" placeholder="最早登录时间" style="width: 165px;float: left;margin-left: 15px;"></el-input>
      <el-input v-model="rolequery.endtime" type="date" placeholder="最晚登录时间" style="width: 165px;float: left;margin-left: 10px;"></el-input>
      <el-button @click="chongzhi" type="infor" style="float: left;margin-left: 10px;">重置</el-button>
      <el-button @click="chaxun" type="primary" style="float: left;">查询</el-button>
      <el-button type="warning" style="float: right;">导出</el-button>
      <el-button @click="dialogVisiblexinzengjuese=true" type="success" style="float: right;">新增角色</el-button>
    </div>

    <el-table
      :data="roles"
      style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;">
      <el-table-column
        label="名称"
        align="center"
        width="150px">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>名称: {{ scope.row.rname }}</p>
            <p>管理标签: {{ scope.row.rlabel }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.rname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="标签"
        align="center"
        width="150px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.rlabel }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
        label="拥有菜单数"
        align="center"
        width="150px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.menunum }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="用户数量"
        width="150px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.usernum }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="产生日期"
        width="150px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="更新日期"
        width="150px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更多详情"
      align="center"
      width="90px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="xiangqing(scope.row.rname,scope.row.id)">更多详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作"
      align="center"
      width="160px">
        <template slot-scope="scope">
         <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button
            size="mini"
            type="danger"
            :disabled="scope.row.usernum==0 && scope.row.menunum==0 ?false:true"
            @click="deleterole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block" style="width: 1150px;margin-left: auto;margin-right: auto;">
        <el-pagination
        style="text-align: center;"
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="rolequery.current"
          :page-sizes="[6, 10, 15, 30]"
          :page-size="rolequery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalroles">
        </el-pagination>
      </div>
      <!-- 详情弹框 -->
      <el-dialog
        title="更多详情"
        :visible.sync="dialogVisiblejuexiangqing"
        width="80%"
        :before-close="handleClose">
        <div style="width: 100%;text-align: center;">
          <span style="font-size: 16px;font-weight: bold;">角色:{{rolename}}</span>
        </div>
        <div style="width: 100%;height: 300px;">
          <div style="width: 49%;float: left;height: 500px;">
            <div style="width: 100%;text-align: center;background-color: burlywood;">
              <span style="font-size: 16px;font-weight: bolder;">菜单信息</span>
            </div>
            <div>
              <el-table
                  :data="menus"
                  height="320"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="菜单名称"
                    align="center"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="info"
                    label="主目录"
                    align="center"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="gmtModified"
                    align="center"
                    width="100"
                    label="更新时间">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button @click="deleterm(scope.row.id)" size="mini" type="danger" plain>删除</el-button>
                    </template>
                    <!-- <el-button size="mini" type="warning" plain>编辑</el-button> -->

                  </el-table-column>
                </el-table>
            </div>
            <div>
              <div style="float: left;margin-top: 4px;">
                <span style="font-size: 14px;color: #85989C;">+菜单或用户&nbsp;&nbsp;</span>
                <el-select v-model="menuvalue" placeholder="请选择菜单">
                    <el-option
                      v-for="item in optionsmenus"
                      :key="item"
                      :label="item"
                      :value="item"
                      >
                    </el-option>
                  </el-select>
                  <el-select v-model="uservalue" placeholder="请选择用户" style="margin-left: 20px;">
                      <el-option
                        v-for="item in optionsusers"
                        :key="item"
                        :label="item"
                        :value="item"
                        >
                      </el-option>
                    </el-select>
              </div>
            </div>
          </div>
          <div style="width: 49%;float: left;margin-left: 2%;">
            <div style="width: 100%;text-align: center;background-color: darksalmon;">
              <span style="font-size: 16px;font-weight: bolder;">用户信息</span>
            </div>
            <div>
              <el-table
                  :data="users"
                  height="320"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="info"
                    label="手机号码"
                    align="center"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="gmtModified"
                    align="center"
                    label="更新时间">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button @click="deleteru(scope.row.id)" size="mini" type="danger" plain>删除</el-button>
                    </template>
                    <!-- <el-button size="mini" type="warning" plain>编辑</el-button> -->
                    <!-- <el-button @click="deleteru(scope.row.id)" size="mini" type="danger" plain>删除</el-button> -->
                  </el-table-column>
                </el-table>
            </div>
            <div>
              <div style="float: left;margin-top: 4px;">
                <el-button @click="addmenuuser" style="margin-left: 4px;" type="success">确认添加</el-button>
                <el-button @click="chongzhi" style="margin-left: 4px;" type="infor">重置</el-button>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">退 出</el-button>
        </span>
      </el-dialog>
      <!-- 新增角色 -->
      <el-dialog
        title="新增角色"
        :visible.sync="dialogVisiblexinzengjuese"
        width="30%"
        :before-close="handleClose">
        <el-input v-model="addrname"  type="text" placeholder="请输入角色名:(示例:xxxx员)" clearable="true"></el-input>
        <el-input v-model="addrlabel"  type="text" placeholder="请输入管理标签:(示例:jadmin)" clearable="true" style="margin-top: 10px;"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button type="primary" @click="addnrole">提 交</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
  import usermethod from '@/api/user/user'
  export default {
    data() {
      return {
        roles: null,
        //角色查询条件
        rolequery:{
            current: 1,
            endtime: null,
            limit: 6,
            rname: null,
            starttime: null,
            },
      //分页参数
      totalroles: 0,
      //角色详情弹出框
      dialogVisiblejuexiangqing: false,
      menus:[],
      users:[],
      rolename:'',
      optionsmenus:['讲师管理','首页1','首页2'],
      menuvalue: '',
      optionsusers:['mcm1','mmm2','sfs2'],
      uservalue: '',
      roleid: '',
      //新增角色
      dialogVisiblexinzengjuese:false,
      addrname: '',
      addrlabel: '',
      }
    },
    created(){
      this.getroles()
    },
    methods: {
      handleEdit(id) {
        this.dialogVisiblejuexiangqing=true
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      //分页带条件获取角色
      getroles(){
        if(this.rolequery.rname!=null || this.rolequery.starttime!=null || this.rolequery.endtime!=null){
          usermethod.getrolecountc(this.rolequery).then(response =>{
            this.totalroles=response.data.a
          })
        }else{
          usermethod.getrolecount().then(response =>{
            this.totalroles=response.data.a
          })
        }
        usermethod.getrolepagedata(this.rolequery).then(response =>{
          this.roles=response.data.roleResponses
        })

      },
      handleSizeChange(val) {
              this.rolequery.limit=val
              this.rolequery.current=1
              this.getroles()
            },
            handleCurrentChange(val) {
             this.rolequery.current=val
             this.getroles()
            },
            //查询重置
            chongzhi(){
              this.uservalue=''
              this.menuvalue=''

              this.rolequery.rname=null
              this.rolequery.starttime=null
              this.rolequery.endtime=null
            },
            chaxun(){
              this.rolequery.current=1
              this.getroles()
            },
            //dilog弹出框 消除
            handleClose(done) {
                    this.$confirm('确认关闭？')
                      .then(_ => {
                        this.uservalue=''
                        this.menuvalue=''
                        this.rolename=''
                        this.roleid=''
                        this.menus=[]
                        this.dialogVisiblejuexiangqing=false
                        this.dialogVisiblexinzengjuese=false
                        this.addrname=''
                        this.addrlabel=''
                        done();
                      })
                      .catch(_ => {});
                  },
          quxiao(){
            this.uservalue=''
            this.menuvalue=''
            this.rolename=''
            this.roleid=''
            this.menus=[]
            this.dialogVisiblejuexiangqing=false
            this.dialogVisiblexinzengjuese=false
            this.addrname=''
            this.addrlabel=''
          },
          xiangqing(rname,id){
            this.roleid=id
            this.rolename=rname
            this.dialogVisiblejuexiangqing=true
            usermethod.getmenusbyroleid(id).then(response =>{
              this.menus=response.data.rolemenuusers
            })
            usermethod.getmenusbyroleidc(id).then(response =>{
              this.users=response.data.rolemenuusers
            })
            this.getmenus()
            this.getusers()
          },
          //获取菜单名list
          getmenus(){
            usermethod.getmenulistc().then(response =>{
              this.optionsmenus=response.data.list
            })
          },
          //获取用户名list
          getusers(){
            usermethod.getuserlistc().then(response =>{
              this.optionsusers=response.data.list
            })
          },
          //添加菜单、用户
          addmenuuser(){
            if(this.menuvalue=='' && this.uservalue==''){
              this.$message.error('没有选择任何菜单或用户')
              return false
            }
            if(this.menuvalue!=''){
              for(var i=0;i<this.menus.length;i++){
                if(this.menus[i].name==this.menuvalue){
                  this.$message.error('已经存在相同菜单')
                  return false
                }
              }
              // 提交 menuvalue roleid 插入 rp
              usermethod.addmenutorole(this.menuvalue,this.roleid).then(response =>{
                if(response.data.a==true){
                  this.$message.success('添加菜单成功')

                  usermethod.getmenusbyroleid(this.roleid).then(response =>{
                    this.menus=response.data.rolemenuusers
                    this.getroles()
                  })
                  // usermethod.getmenusbyroleidc(this.roleid).then(response =>{
                  //   this.users=response.data.rolemenuusers
                  //   this.getroles()
                  // })
                }else{
                  this.$message.error('添加菜单失败')
                }
              })
            }
            if(this.uservalue!=''){
              for(var i=0;i<this.users.length;i++){
                if(this.users[i].name==this.uservalue){
                  this.$message.error('已经存在相同用户')
                  return false
                }
              }
              usermethod.addmenutorolec(this.uservalue,this.roleid).then(response =>{
                if(response.data.a==true){
                  this.$message.success('添加用户成功')

                  // usermethod.getmenusbyroleid(this.roleid).then(response =>{
                  //   this.menus=response.data.rolemenuusers
                  //   this.getroles()
                  // })
                  usermethod.getmenusbyroleidc(this.roleid).then(response =>{
                    this.users=response.data.rolemenuusers
                    this.getroles()
                  })
                }else{
                  this.$message.error('添加用户失败')
                }
              })
            }
          },
          //删除角色-菜单
          deleterm(id){
            usermethod.delerm(id).then(response =>{
              if(response.data.a==true){
                this.$message.success('取消菜单成功')
                usermethod.getmenusbyroleid(this.roleid).then(res =>{
                  this.menus=res.data.rolemenuusers
                  this.getroles()
                })
              }else{
                this.$message.error('取消菜单失败')
              }
            })

          },
          //删除角色-用户
          deleteru(id){
            usermethod.deleru(id).then(response =>{
              if(response.data.a==true){
                this.$message.success('取消用户成功')
                usermethod.getmenusbyroleidc(this.roleid).then(res =>{
                  this.users=res.data.rolemenuusers
                  this.getroles()
                })
              }else{
                this.$message.error('取消用户失败')
              }
            })
          },
          //逻辑删除角色
          deleterole(id){
            usermethod.logicdeleterole(id).then(response => {
              if(response.data.a==true){
                this.$message.success('逻辑删除角色成功')
                this.getroles()
              }
            })
          },
          //新增角色
          addnrole(){
            if(this.addrname!='' && this.addrlabel!=''){
              usermethod.addrolex(this.addrname,this.addrlabel).then(response =>{
                if(response.data.a==true){
                  this.$message.success('新增角色成功')
                  this.getroles()
                  this.addrname=''
                  this.addrlabel=''
                  this.dialogVisiblexinzengjuese=false
                }else{
                  this.$message.error(response.data.a)
                }
              })
            }else{
              this.$message.error("名称和标签不能为空")
            }
            
          }
    }
  }
</script>
